<template>
  <div ref="containerRef" :style="{ width: width, height: height }"></div>
</template>
<script setup lang="ts">
import useEchart from '@/hooks/useEchart'

const props = defineProps({
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  },
  barData: {
    type: Array,
    default: () => []
  }
})

const { width, height, barData } = toRefs(props)

const containerRef = ref<null | HTMLElement>(null)
let chart = null

const getOption = (echartData = []) => {
  let categoryData = echartData.map((item) => {
    return item.name
  })
  let barData = echartData.map((item) => {
    return item.value
  })

  return {
    grid: {
      left: '5%',
      right: '5%',
      top: '30%',
      bottom: '5%',
      containLabel: true // grid 区域是否包含坐标轴的刻度标签
    },
    tooltip: {},
    xAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: '#42A4FF'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: 'white'
      },

      data: categoryData
    },
    yAxis: {
      name: '个',
      nameTextStyle: {
        color: 'white',
        fontSize: 13
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#42A4FF'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#42A4FF'
        }
      },
      axisLabel: {
        color: 'white'
      }
    },
    series: [
      {
        name: '销量',
        type: 'bar',
        barWidth: 17,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#01B1FF' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#033BFF' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        data: barData
      }
    ]
  }
}
const setupEchart = (data) => {
  if (!chart) {
    chart = useEchart(containerRef.value as HTMLElement)
  }
  chart.setOption(getOption(data))
}

onMounted(() => {
  setupEchart(barData.value)
})
watch(
  () => barData.value,
  (newValue) => {
    setupEchart(newValue)
  }
)
</script>

<style scoped lang="scss"></style>
